<template>
  <div class="program">
    <!-- 头 -->
    <div class="program_title">
      <div class="title_left">节目({{ total }})</div>
      <span><van-icon name="sort" />切换顺序</span>
    </div>
    <!-- 播放列表 -->
    <div class="view_list">
      <div class="view_item" v-for="(item, index) in titleList" :key="index">
        <div class="long">
          <van-icon name="play-circle-o" size="24" class="icon1" />
          <div class="item_text">
            {{ item }}
          </div>
        </div>
        <van-icon name="down" size="16" class="icon" />

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqAlbumTrackRecord } from "../../../api/detail/index";
import type { trackDetailInfosType } from "../../../api/detail/type";
let trackDetailInfos = ref<trackDetailInfosType[]>([]);
let total = ref<number>();
let props = defineProps<{
  id: number;
}>();
let titleList = ref<string[]>();
onMounted(() => {
  getTrackData();
});
//请求节目列表的功能函数

const getTrackData = async () => {
  try {
    let res = await reqAlbumTrackRecord(props.id);
    if (res.ret == 0) {
      trackDetailInfos.value = res.data.trackDetailInfos;
      titleList.value = trackDetailInfos.value.map(
        (item) => item.trackInfo.title
      );
      total.value = res.data.totalCount;
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.title_left {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
}

.program_title {
  padding: 0;
  display: flex;
  justify-content: space-between;

  span {
    font-size: 14px;
    color: #999;
  }
}

.view_item {
  display: flex;
  justify-content: space-between;
  width: 312px;
  margin: 15px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.item_text {
  font-size: 16px;
  line-height: 1.38;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  margin: 0 15px;
}
.icon {
  margin-top: 10px;
  color: #999;
  margin-left: 15px;
}
.icon1 {
  color: #999;
}

.long {
  display: flex;
  justify-content: space-between;
}
</style>
